<template>
	<view>
		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="list" :show="fail"></u-empty>
		</view>
		<block v-else>
			<u-gap height="20"></u-gap>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="">
						<view class="">
							订单号：{{item.orderNumber}}
						</view>
						<view class="">
							{{item.integralTypeName}}
						</view>
					</view>
					<view class="">
						<view class="">
							{{item.addTime}}
						</view>
						<view class="">
							{{item.integral}}
						</view>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<u-loadmore :status="status"></u-loadmore>
			<u-gap height="20"></u-gap>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				fail: false,
				status: 'loading',
				list: []
			}
		},
		onLoad(options) {
			this.pageNo = 1
			this.endTime = options.endTime
			this.startTime = options.startTime
			this.integralType = options.integralType
			this.getList(res => {
				this.loading = false
				if (res == '') {
					this.fail = true
					return
				}
				this.status = res.length < 10 ? 'nomore' : 'loadmore'
				this.list = res
			})
		},
		onPullDownRefresh() {
			this.pageNo = 1
			this.status = 'loading'
			this.getList(res => {
				uni.stopPullDownRefresh()
				if (res == '') {
					this.fail = true
					return
				}
				this.status = res.length < 10 ? 'nomore' : 'loadmore'
				this.list = res
			})
		},
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') return
			this.pageNo++
			this.status = 'loading'
			this.getList(res => {
				if (res == '') {
					this.status = 'nomore'
					return
				}
				this.list = this.list.concat(res)
				this.status = 'loadmore'
			})
		},
		methods: {
			getList(callback) {
				this.$u.post('cashintegrallog/detail', {
					endTime: this.endTime,
					integralType: this.integralType,
					startTime: this.startTime,
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					callback(res.list)
				})
			}
		}
	}
</script>

<style lang="scss">
	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	page {
		background-color: #f7f7f7;
	}

	.list {
		.item {
			background-color: #FFFFFF;
			margin: 0 30rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			padding: 30rpx;

			>view {
				display: flex;

				>view {
					word-break: break-all;

					&:first-child {
						width: 70%;
					}

					&:last-child {
						width: 30%;
						text-align: right;
					}
				}

				&:first-child {
					margin-bottom: 20rpx;
				}
			}

			&:first-child {
				margin-top: 0;
			}
		}
	}
</style>
